<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
        <title>系统管理-字典管理-字典树列表</title>
        <link th:href="@{/lib/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet" type="text/css"/>
    </head>
    <style>
        body {
            height: auto;
            font-family: "Microsoft YaHei";
        }
        button {
            font-family: "SimSun", "Helvetica Neue", Helvetica, Arial;
        }
    </style>
    <body class="hold-transition box box-main">
        <input type="hidden" id="treeId" name="treeId" th:value="${ids}"/>
        <input type="hidden" id="treeName" name="treeName" th:value="${names}"/>

        <div class="wrapper">
            <div class="treeShowHideButton" onclick="$.tree.toggleSearch();">
                <label id="btnShow" title="显示搜索" style="display:none;"><i class="fa fa-chevron-down"></i></label>
                <label id="btnHide" title="隐藏搜索"><i class="fa fa-chevron-up"></i></label>
            </div>
            <div class="treeSearchInput" id="search">
                <label for="keyword">关键字：</label>
                <input type="text" class="empty" id="keyword" maxlength="50">
                <button class="btn" id="btn" onclick="$.tree.searchNode('keyword')">搜索</button>
            </div>
            <div class="treeExpandCollapse hidden">
                <a href="#" onclick="$.tree.expand()">展开</a>
                /
                <a href="#" onclick="$.tree.collapse()">折叠</a>
            </div>
            <div class="ztree treeselect" id="tree"></div>
        </div>

        <div th:replace="/common/include :: footer"></div>
        <div th:replace="/common/include :: ztreeJs"></div>

        <script th:inline="javascript">
            var url = ctx + 'api/system/dict/treeData?dictGroup=' + [[${dictGroup}]];

            var treeType = {
                single: [[${single}]],
                multi: [[${multi}]]
            };
            var selected = [[${dictCodes}]];
            var check = {
                enable: false,             // 置 zTree 的节点上是否显示 checkbox / radio
                nocheckInherit: false      // 设置子节点是否自动继承
            };

            $(function () {
                if (treeType.multi) {
                    check = {
                        enable: true,
                        nocheckInherit: true,
                        chkboxType: { 'Y': 'ps', 'N': 'ps' }
                    };
                } else if (treeType.single) {
                    check = {
                        enable: true,
                        chkStyle: 'radio',
                        nocheckInherit: false,
                        radioType: 'all'
                    };
                }

                var options = {
                    url: url,
                    expandLevel: 0,
                    check: check,
                    onCheck: zOnCheck,
                    onClick: zOnClick
                };
                $.tree.init('tree', options, selected);
            });

            function zOnClick(event, treeElement, treeNode, clickFlag) {
                $.tree._tree['tree'].checkNode(treeNode, !treeNode.checked, true);
                $.tree.updateIdName(event, treeElement, treeNode, treeType);
            }

            function zOnCheck(event, treeElement, treeNode) {
                $.tree.updateIdName(event, treeElement, treeNode, treeType);
            }

            function getCheckedNodeIds() {
                return $.tree.getCheckedNodes();
            }

            function getCheckedNodeNames() {
                return $.tree.getCheckedNodes('name');
            }

        </script>
    </body>
</html>
